import {EVENT_TYPES} from "./var.js";

export class Continer {
  // 初始化容器
  constructor() {
    // 1.创建容器
    this.continerWraper = document.createElement("div");
    this.continerWraper.classList.add('draw-freeBox');
    this.continerWraper.setAttribute('eventType', EVENT_TYPES.moveEvenType);
    // 2.创建显示
    this.continer = document.createElement("div");
    this.continer.classList.add('draw-freeBox-view');
    // 2.创建容器缩放部件
    this.resizeBtn = document.createElement('div');
    this.resizeBtn.classList.add('draw-freeBox--resizebtn');
    this.resizeBtn.setAttribute('eventType', EVENT_TYPES.resizeEvenType);
    this.continerWraper.appendChild(this.continer);
    this.continerWraper.appendChild(this.resizeBtn);
  }

  /** 监听事件 */
  onBegin({x, y}) {
    switch (this.global.activetargetEventType) {
      case EVENT_TYPES.darwerEvenType:
        this.clickDwarer({x, y});
        break;
      case EVENT_TYPES.moveEvenType:
        this.moveContiner(from, {x, y});
        break;
      case EVENT_TYPES.resizeEvenType:
        break;
    }
  }

  // 选择工具时
  onMove(from, {x, y}) {
    if (!this.continerWraper.show) return;
    switch (this.global.activetargetEventType) {
      case EVENT_TYPES.darwerEvenType:
        this.createContiner({x, y});
        break;
      case EVENT_TYPES.moveEvenType:
        this.moveContiner({x, y});
        break;
      case EVENT_TYPES.resizeEvenType:
        this.resizeContiner({x, y});
        break;
    }
  }

  onEnd({x, y}) {
    if (!this.continerWraper.show) {
      return;
    } else if(x-this.left<2 && y-this.top<2){
      this.continerWraper.show = false;
      return;
    }
    switch (this.global.activetargetEventType) {
      case EVENT_TYPES.darwerEvenType:
        // 4.发送事件
        this.created();
        break;
      case EVENT_TYPES.moveEvenType:
        break;
      case EVENT_TYPES.resizeEvenType:
        break;
    }
  }

  /** 点击画布时 */
  clickDwarer({x, y}) {
    if (this.continerWraper.show) {
      // 1.隐藏
      this.destroyContiner();
    } else {
      this.beginCreate({x, y});
    }
  }

  /** 容器声明周期管理 */
  // 主动创建一个区域，子类调用
  initContiner(x, y, wight, height) {
    this.clickDwarer({x, y});
    this.continerWidth = wight;
    this.continerHeight = height;
    this.createContiner({x: wight, y:height});
  }
  // 准备创造容器
  beginCreate({x, y}) {
    if (this.continerWraper.show === undefined) {
      this.global.homeEl.appendChild(this.continerWraper);
    }
    this.continerWraper.show = true;
    // 2.记录坐标
    this.top = y;
    this.left = x;
    this.continerWidth = 0;
    this.continerHeight = 0;
    this.resizeContiner({x: this.global.beginX, y: this.global.beginY});
  }
  // 画出容器,显示判断
  createContiner({x, y}) {
    if (y-this.top>5 || x-this.left>5) {
      this.continerWraper.show = true;
      this.continerWraper.classList.remove('drow-item--hide');
    }
    // 3.设置大小
    this.resizeContiner({x, y});
    this.moveContiner({});
  }
  // 隐藏容器
  destroyContiner() {
    this.continerWraper.show = false;
    this.continerWraper.classList.add('drow-item--hide');
    this.beforeDestroy();
  }

  /** 更新容器大小、位置 */
  resizeContiner({x, y}) {
    if (!isNaN(x)) {
      this.continerWidth = Math.max(x - this.left, 1);
      this.continerHeight = Math.max(y - this.top, 1);
    }
    this.continerWraper.style.width = `${this.continerWidth}px`;
    this.continerWraper.style.height = `${this.continerHeight}px`;
    this.afterResize();
  }

  moveContiner({x, y}) {
    if (!isNaN(x)) {
      this.top -= this.global.lastY - y;
      this.left -= this.global.lastX - x;
    }
    this.continerWraper.style.top = `${this.top}px`;
    this.continerWraper.style.left = `${this.left}px`;
    this.afterMove();
  }

  /** 子类的钩子 */
  // 容器大小变化时
  afterResize() {

  }

  // 容器移动时
  afterMove() {

  }

  // 容器创建时
  created() {
  }

  // 容器销毁时
  beforeDestroy() {
  }

  /** 工具 */
  // 复制:当前区域内容复制到虚拟剪贴板
  async copy() {
    const base64 = await this.global.toBase64(this.continer);
    this.global.vClipbrd = {
      base64,
      width: this.continerWidth,
      height: this.continerHeight
    };
  }
  // 黏贴
  async paste() {
    const left = parseFloat(this.continerWraper.style.left);
    const top = parseFloat(this.continerWraper.style.top);
    const base64 = await this.global.toBase64(this.continer);
    this.global.base642Ctx(this.ctx, base64, left, top);
  }

  /** 父容器监听 */
  readyTool() {

  }
  stopTool() {
    if (this.continerWraper) {
      // this.destroyContiner();
    }
  }
}